
#m-star {
  background: #000;
  background: -webkit-radial-gradient(#0d141a, #1a2733);
  background: -o-radial-gradient(#0d141a, #1a2733);
  background: -moz-radial-gradient(#0d141a, #1a2733);
  background: radial-gradient(#0d141a, #1a2733);
  display: block;
}

.m-logo {
  margin-left:5px;
  margin-top:5px;
}
.m-menu-btn {
  position: absolute;
  right:16px;
  top:16px;
}
.m-nav {
  position: absolute;
  top:0;
  right:-200px;
  width:200px;
  background-color: rgba(31, 54, 77, .8);
  padding-top:60px;
  padding-left:0;

  .close-btn {
    background: url("/dist/img/index_m/m-icon-close.png") no-repeat;
    -webkit-background-size: 18px 18px;
    background-size:18px 18px;
    position: absolute;
    top:16px;
    right:16px;
    width:18px;
    height:18px;
  }

  li {
    a {
      line-height: 56px;
      width:100%;
      padding-left:40px;
      color:#fff;
      text-decoration: none;;
      display: block;

      &:hover {
        background-color: #132232;
      }
    }
  }
}

.m-main {
  position: absolute;
  top: 20%;
  left:50%;
  width: 240px;
  margin-left: -120px;

  h1 {
    height:80px;
    img {
      position: absolute;
    }
  }

  .m-nav-main {
    padding:20px 0;
    border-top: 1px solid #273341;
    border-bottom: 1px solid #273341;
    animation: m-slidedown 2s;
    -webkit-animation: m-slidedown 2s;
    overflow: hidden;

    li {
      a {
        display: block;
        width: 100%;
        text-align: center;
        line-height: 45px;
        color: #f5f5f5;
        text-decoration: none;
      }

      &:hover {
        background-color: rgba(48, 56, 64, 0.4);
        color:#fff;
      }
    }
  }
}

.m-arrow {
  position: absolute;
  bottom:16px;
  left:50%;
  width:27px;
  height:17px;
  background: url("/dist/img/index_m/arrow.png") no-repeat;
  -webkit-background-size:27px 17px;
  background-size:27px 17px;
  -webkit-animation:3s infinite arrowup;
  animation:3s infinite arrowup;
  margin-left: -13px;
}

@-webkit-keyframes arrowup {
  0%{ opacity:0; transform:translate(0,0);}
  50%{ opacity:1; transform:translate(0,-20px);}
  100%{ opacity:0; transform:translate(0,-30px);}
}
@keyframes arrowup {
  0%{ opacity:0; transform:translate(0,0);}
  50%{ opacity:1; transform:translate(0,-20px);}
  100%{ opacity:0; transform:translate(0,-30px);}
}
@-webkit-keyframes m-slidedown {
  from {
    max-height:0;
    padding:0;
  }
  to {
    max-height:300px;
    padding:20px 0;
  }
}
@keyframes m-slidedown {
  from {
    max-height:0;
    padding:0;
  }
  to {
    max-height:300px;
    padding:20px 0;
  }
}

.page-slider {
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  z-index: 9;
}

.m-navbar {
  background: none;
}




.navbar-fixed-top {
  z-index: 999;
}

.m-main {
  .swiper-slide {
    p.pic {
      margin-bottom:32px;
    }
    p {
      text-align: center;
      color: #f5f5f5;
      max-width:286px;
      margin:8px auto;
    }
    p:last-of-type {
      padding-bottom: 30px;
    }
  }
}

.m-page-2 {
  width:100%;
  left:0;
  margin-left:0;
  top:15%;
}

.m-page.zoomindex {
  z-index:9;
}

.join-us {
  padding: 30px;
  h1 {
    font-size: 24px;
    color:#fff;
    font-weight:normal;
    padding:8px 0;
  }
  form {
    .form-control {
      margin: 8px 0;
    }
    input[type=text], textarea {
      background-color: #19232f;
      border:1px solid #141c26;
      border-radius:2px;
      color:#fff;
    }

    input[type=submit] {
      color:#fff;
      width:100%;
    }
  }
}
#musicControl{
  width:2.4em;
  height:2.4em;
  padding: .3em;
  border-radius: 50%;
  border: 2px solid #494d5e;
  position: fixed;
  right:1em;
  bottom: 1.6em;
  -webkit-animation: 4s infinite loops;
  -o-animation: 4s infinite loops;
  animation: 4s infinite loops;
  background: rgba(0,0,0,0);
  z-index: 999;
}
#musicControl.active{
  background: rgba(0,0,0,.7);
}
#musicControl img{
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}
@-webkit-keyframes loops {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loops {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}